<template>
  <view class="honor-item" v-for="(v, i) in list" :key="i" :style="{ background }">
    <img class="icon" :src="getIcon" alt="" />
    <view class="text">{{ v }}</view>
  </view>
</template>

<script setup lang="ts">
  import { computed, PropType } from 'vue';

  import { propTypes } from '@/utils/propTypes';
  const icon1 = 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-3.png';
  const icon2 = 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-4.png';
  const icon3 = 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-7.png';
  const props = defineProps({
    iconType: Number as PropType<1 | 2 | 3>,
    list: Array as PropType<string[]>,
    background: propTypes.string.def('linear-gradient(141deg, #fff4dc 0%, #ffffff 96%)'),
  });

  const getIcon = computed(() => {
    let icon = icon1;
    switch (props.iconType) {
      case 2:
        icon = icon2;
        break;
      case 3:
        icon = icon3;
        break;
    }
    return icon;
  });
</script>

<style lang="scss" scoped>
  .honor-item {
    // height: 85rpx;
    display: flex;
    // align-items: center;
    border-radius: 10rpx;
    padding: 20rpx 20rpx;
    margin-bottom: 20rpx;

    .icon {
      width: 46rpx;
      height: 46rpx;
      margin-right: 26rpx;
      flex-shrink: 0;
    }

    .text {
      font-size: 32rpx;
      color: #333333;
    }
  }
</style>
